<template>
	<view>
		<image mode="widthFix" class="logo" :src="mode.isDayTime?'/static/logo.png':'/static/logo_moon.png'">
		</image>

		<view style="height: 10rpx;"></view>

		<view style="padding: 0 40rpx 40rpx 40rpx;">
			<u-search @search="search()" v-model="mode.searchKeyword" @input="searchInput()" :action-style="{
				 'fontSize':'0rpx',
				 'width':'0rpx'
			 }" :focus="true" style="
			 box-shadow:0 4rpx 10rpx rgba(118,118,118,.3);
			 border-radius: 50rpx;
			 " :color="mode.isDayTime?'#8a8a8a':'#f0f0f0'" :search-icon-color="'rgb(154, 160, 166)'"
				:bg-color="mode.isDayTime?'#FFFFFF':'#202124'" input-align="center" height="80">
			</u-search>
			<view 	v-if="searchKeywords!=null&&searchKeywords.length>0">
				<view style="height: 15rpx;"></view>
				<view 
				:style="'font-weight: 300;font-size: 20rpx;margin-left: 20rpx;'+
				(mode.isDayTime?'color:#8a8a8a':'color:#f0f0f0')
				">系统自添关键词:
					<view style="display: inline;margin-left: 20rpx;">
						<view style="display: inline;" v-for="(item,index) in searchKeywords"
						v-show="item!=requestParam.data"
						>{{item}}
							<view style="display: inline;" v-if="index<searchKeywords.length-1">、</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="split-line" :style="
		mode.isDayTime?
		'box-shadow: 0 0 30rpx #f1f1f1 inset;':
		'box-shadow: 0 0 30rpx #000000 inset;'
		">
		</view>

		<view style="padding: 30rpx;">
			<view class="body-data-box" :style="
			 mode.isDayTime?
				'box-shadow: 0 5rpx 10rpx rgba(118,118,118,.2);':
				'box-shadow: 0 5rpx 10rpx rgba(118,118,118,.2);background-color:#202124'
			 " @click="open(item.href)" v-for="(item,index) in bodyData.content">
				<view class="body-data-title" :style="mode.isDayTime?
				'color: #1558D6;':
				'color: #8ab4f8;'">
					<view v-for="(item1,index1) in item.title.split('')" :style="highlight([searchKeyword,...searchKeywords],item.title).indexOf(index1)!=-1?
						'display: inline;color:red':
						'display: inline;'">
						{{item1}}
					</view>
				</view>

				<view style="height: 10rpx;"></view>

				<view class="body-data-content" v-for="(item1,index1) in item.content.split('')" :style="
				 'display: inline;'+
				 
				 (mode.isDayTime?'color:#4d5156;':'color:rgb(189, 193, 198);')+
				
				(highlight([searchKeyword,...searchKeywords],item.content).indexOf(index1)!=-1?
				 'display: inline;color:red':
				 'display: inline;')
				 
				 ">
					{{item1}}
				</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view v-if="
				bodyData.content!=null&&
				bodyData.content.length>0&&
				requestParam.pageNumber==1&&
				bodyData.totalPages>1
				">
			<u-button 
			:ripple="true"
			:ripple-bg-color="mode.isDayTime?'rgba(255,255,255,.2)':'rgba(118,118,118,.2)'"
			
			@click="requestParam.pageNumber++;search()"
			 shape="circle"
			 style="width: 70%;height: 100rpx;"
			:type="mode.isDayTime?'primary':'info'">下一页</u-button></view>


			<view
			style="position: relative;height: 100rpx;"
			v-if="
				bodyData.content!=null&&
				bodyData.content.length>0&&
				requestParam.pageNumber>1
				">
			<u-button
			:ripple="true"
			:ripple-bg-color="mode.isDayTime?'rgba(255,255,255,.2)':'rgba(118,118,118,.2)'"
			
			@click="requestParam.pageNumber--;search()"
			 shape="circle"
			 
			 style="width: 30%;position: absolute;height: 100rpx;"
			:type="mode.isDayTime?'primary':'info'">上一页</u-button>
			<view class="page-text" :style="(mode.isDayTime?'color:#8a8a8a':'color:rgb(189, 193, 198)')">{{requestParam.pageNumber}}/{{bodyData.totalPages}}</view>
			<u-button 
			:ripple="true"
			:ripple-bg-color="mode.isDayTime?'rgba(255,255,255,.2)':'rgba(118,118,118,.2)'"
			
			:disabled="!(requestParam.pageNumber<bodyData.totalPages)"
			@click="requestParam.pageNumber++;search()"
			 shape="circle"
			 style="width: 30%;position: absolute;right: 0;height: 100rpx;"
			:type="mode.isDayTime?'primary':'info'">下一页</u-button></view>
			
			
			<view style="height: 50rpx;"></view>
		</view>
		
	</view>
</template>

<script>
	import Request from '../../utils/Request.js'
	import Api from '../../utils/Api.js'

	export default {
		props: ['mode'],
		data() {
			return {
				bodyData: {},
				requestParam: {
					"pageNumber": 1,
					"pageSize": 20,
					"data": null
				},
				searchKeyword:null,
				searchKeywordIns: [],
				searchKeywords: []
			}
		},
		methods: {
			getSearchKeywordIns() {
				// alert(Api.search.getSearchKeywordIns);
				Request.request(this, {
					url: Api.search.getSearchKeywordIns,
					data: {
						"keyword": this.requestParam.data
					},
					success: (res) => {
						this.searchKeywordIns = res.data.data;
						this.searchKeywords = [];
						for (var i = 0; i < this.searchKeywordIns.length; i++) {
							var item = this.searchKeywordIns[i];
							this.searchKeywords.push(item.name);
							for (var j = 0; j < item.keywordIns.length; i++) {
								var item1 = item.keywordIns[i];
								this.searchKeywords.push(item1.searchName);
							}

						}
					}
				})
			},
			search() {
				this.requestParam.data=this.mode.searchKeyword;
				Request.request(this, {
					url: Api.search.go,
					data: this.requestParam,
					success: (res) => {
						this.bodyData = res.data.data;
						this.searchKeyword=""+this.requestParam.data;
						this.getSearchKeywordIns();
					}
				})
			},
			searchInput() {
				this.$forceUpdate();
			},
			highlight(words, text) {
				var arr = [];
				for (var i = 0; i < words.length; i++) {
					var item = words[i];
					var indexOf = text.indexOf(item);
					if (indexOf != -1) {
						for (var j = indexOf; j < indexOf + item.length; j++) {
							arr.push(j);
						}
					}
				}
				return arr;
			},
			open(href) {
				window.open(href);
			}
		}
	}
</script>

<style scoped>
	.logo {
		position: relative;
		width: 300rpx;
		margin-left: 50%;
		transform: translate(-50%);
	}

	.split-line {
		width: 100%;
		height: 10rpx;
		background-color: #F1F1F1;
	}

	.body-data-box {
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.body-data-title {
		font-size: 35rpx;
	}

	.body-data-content {
		font-size: 20rpx;
		margin: 0;
		padding: 0;
		font-weight: lighter;
	}
	
	.page-text{
		display: inline;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		line-height: 100rpx;
	}
</style>
